<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/masterLayout.xhtml">

	<ui:define name="title">
			PROVINCIAS - CIUDADES
	</ui:define>

	<ui:define name="content">

		<p:growl id="mensajes" showDetail="true" life="7000" />

		<p:panel id="panel" header="LISTADO DE PROVINCIAS"
			style="margin-bottom:10px;text-align:center">

			<h:form id="formDataTable">

				<p:focus context="formDataTable" />

				<p:dataTable id="tablaProvincias" var="provincia"
					value="#{provinciaBean.listaProvincias}" paginator="true" rows="10"
					emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom">

					<p:column headerText="#{msg['lbl.gestionar']}" width="20px">

						<p:commandButton id="btnMostrar" update=":formMostrar"
							oncomplete="PF('provinciaDialogoMostrar').show()"
							icon="ui-icon-newwin">
							<f:setPropertyActionListener value="#{provincia}"
								target="#{provinciaBean.provincia}" />
						</p:commandButton>

						<p:commandButton id="btnEditar" update=":formEditar"
							oncomplete="PF('provinciaDialogoEditar').show()"
							icon="ui-icon-pencil" action="#{provinciaBean.cargarCiudades}">
							<f:setPropertyActionListener value="#{provincia}"
								target="#{provinciaBean.provincia}" />
						</p:commandButton>

					</p:column>

					<p:column headerText="NOMBRE PROVINCIAS" filterMatchMode="contains"
						filterBy="#{provincia.nombre}" width="80px">  
            			#{provincia.nombre}  
        			</p:column>

				</p:dataTable>
			</h:form>
		</p:panel>

		<p:dialog header="MOSTRAR PROVINCIA"
			widgetVar="provinciaDialogoMostrar" resizable="false" modal="false"
			showEffect="clip" hideEffect="fold" id="dialogoMostrar"
			styleClass="dialogoMostrarCiudades">
			<h:form id="formMostrar">
				<h:panelGrid columns="2">
					<h:outputText value="NOMBRE PROVINCIA:" style="font-weight:bold" />
					<h:outputText value="#{provinciaBean.provincia.nombre}" />
				</h:panelGrid>
				<p:dataTable id="tablaCiudades" var="ciudad"
					value="#{provinciaBean.provincia.ciudads}" paginator="true"
					rows="10" emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom">
					<p:column headerText="NOMBRE CIUDADES">  
            				#{ciudad.nombre}  
        				</p:column>
				</p:dataTable>
			</h:form>
		</p:dialog>

		<p:dialog header="EDITAR PROVINCIA" widgetVar="provinciaDialogoEditar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoEditar" width="50%">

			<h:form id="formEditar">

				<h:panelGrid columns="1">
					<h:panelGrid columns="3" width="100%">
						<h:outputText value="NOMBRE PROVINCIA:" style="font-weight:bold" />
						<h:outputText value="#{provinciaBean.provincia.nombre}" />
						<h:outputText value="" />

						<h:outputText value="NOMBRE CIUDAD:" style="font-weight:bold" />
						<p:inputText value="#{provinciaBean.ciudad.nombre}"
							onblur="this.value=this.value.toUpperCase();"
							style="width: 100%;" />
						<p:commandButton update=":mensajes, formEditar"
							styleClass="botonInsertarCiudad"
							actionListener="#{provinciaBean.insertarCiudad}"
							icon="ui-icon-plus" />
					</h:panelGrid>

					<p:dataTable id="tablaCiudades" var="ciudad"
						value="#{provinciaBean.listaCiudades}" paginator="true" rows="10"
						emptyMessage="#{msg['lbl.mensajeTabla']}"
						paginatorPosition="bottom">
						<p:column headerText="NOMBRE CIUDADES">  
            				#{ciudad.nombre}  
        				</p:column>
					</p:dataTable>

					<f:facet name="footer">
						<p:separator />
						<p:commandButton value="#{msg['btn.guardar']}"
							update=":formDataTable, :mensajes, formEditar"
							oncomplete="PF('provinciaDialogoEditar').hide()"
							id="btnModificarAceptar"
							actionListener="#{provinciaBean.actualizar}"
							icon="#{msg['iconoGuardar']}" />

						<p:commandButton value="#{msg['btn.cancelar']}"
							oncomplete="PF('provinciaDialogoEditar').hide()"
							id="btnModificarlimpiar" icon="ui-icon-close" />
					</f:facet>
				</h:panelGrid>
			</h:form>
		</p:dialog>

		<script type="text/javascript">
			//<![CDATA[

			//]]>
		</script>

	</ui:define>

</ui:composition>
</html>